<template>
    <el-dialog
        v-model:visible="diagShow"
        :close-on-click-modal="false"
        append-to-body
        width="588px"
        class="building-list"
        @close="close"
        @open="open"
    >
        <div slot="title">
            <label style="font-weight: bold">楼盘详情</label>
        </div>
        <div v-loading="loading">
            <!-- 楼盘位置，缩略图 -->
            <div class="building-location">
                <div class="img">
                    <img :src="buildData.skupic" />
                </div>
                <div class="info">
                    <span>{{ buildData.name }}</span>
                    <span class="label">{{ buildData.typeName }}</span>
                    <span
                    ><i class="el-icon-location-outline" style="margin-right: 4px"></i>{{ buildData.address }}</span
                    >
                </div>
            </div>
            <!-- 楼盘大略 -->
            <div class="building-info">
                <div>
                    <span>楼栋数：</span><span class="red-color">{{ buildData.buildNum }}</span>
                </div>
                <div>
                    <span>单元数：</span><span class="red-color">{{ buildData.unitNum }}</span>
                </div>
                <div>
                    <span>签约电梯量：</span><span class="red-color">{{ buildData.elevatorNum }}</span>
                </div>
            </div>
            <!-- 楼盘详情 -->
            <div class="building-detail">
                <div>
                    <span>入住时间：{{ getFormatDate(buildData.inTime) }}</span>
                    <span>最低楼层：{{ buildData.minStorey }}</span>
                    <span>车位数：{{ buildData.parkingNum }}个</span>
                </div>
                <div>
                    <span>入住率：{{ buildData.inHouseRate }}%</span>
                    <span>最高楼层：{{ buildData.maxStorey }}</span>
                    <span>平均售价：{{ buildData.avgPrice }}元/㎡</span>
                </div>
                <div>
                    <span>覆盖人数：约{{ buildData.weekforpeople }}/周</span>
                    <span>物业费：{{ buildData.managementPrice }}元/㎡/月</span>
                    <span>总户数：{{ buildData.houseNum }}户</span>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer"></span>
    </el-dialog>
</template>

<script>
// import { getBuildingDetail } from '@/api/map';
import { getFormatDate, accMul } from '@/utils/common.ts';

export default {
    name: 'BuildingDetail',
    props: {
        diagVisible: {
            // 模态框显示否
            type: Boolean,
            required: true,
        },
        premisesId: {
            // id
            type: [Number, String],
            required: true,
            default: 0,
        },
    },
    data() {
        return {
            loading: false,
            buildData: {},
        };
    },
    computed: {
        diagShow: {
            get: function () {
                return this.diagVisible;
            },
            set: function () {},
        },
    },
    methods: {
        getFormatDate(time) {
            return getFormatDate(accMul(time, 1000), 'YYYY-mm-dd');
        },
        close() {
            this.$emit('update:diagVisible', false);
        },
        open() {
            this.loading = true;
            // getBuildingDetail(this.premisesId)
            //     .then((res) => {
            //         this.loading = false;
            //         this.buildData = res || {};
            //     })
            //     .finally(() => {
            //         this.loading = false;
            //     });
        },
    },
};
</script>

<style lang="scss" scoped>
.building-list {
    .building-info {
        display: flex;
        flex-direction: row;
        border-bottom: 1px solid #e5e7e9;
        padding: 20px 0;
        justify-content: space-between;
        div {
            flex: 1;
        }
        span {
            font-size: 14px;
            font-weight: 400;
            text-align: left;
            color: #333333;
            line-height: 20px;
        }
        .red-color {
            color: #E60044;
        }
    }
    .building-detail {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-top: 20px;
        div {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        span {
            font-size: 14px;
            font-weight: 400;
            text-align: left;
            color: #666666;
            line-height: 20px;
            margin-bottom: 10px;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    .building-location {
        display: flex;
        border-bottom: 1px solid #e5e7e9;
        padding-bottom: 20px;
        img {
            width: 80px;
            height: 80px;
            border-radius: 5px;
        }
        .img {
            display: inline-block;
        }
        .info {
            display: flex;
            flex-direction: column;
            margin-left: 10px;
            span:first-child {
                font-size: 14px;
                font-weight: 600;
                text-align: left;
                color: #333333;
                line-height: 20px;
            }
            span.label {
                margin: 8px 0 16px 0;
                background: rgba(51, 51, 51, 0.03);
                border: 1px solid rgba(51, 51, 51, 0.51);
                border-radius: 4px;
                width: fit-content;
                padding: 4px 6px;
                line-height: 12px;
            }
            span:last-child {
                font-size: 12px;
                font-weight: 400;
                text-align: left;
                color: #999999;
                line-height: 17px;
            }
        }
    }
}

::v-deep.el-dialog .el-dialog__footer {
    padding: 10px 20px !important;
}
</style>
